<template>
  <div class="exercise-suggestions-wrapper">
    <div class="exercise-suggestions-container">
      <!-- 返回按钮 -->
      <button @click="goBack" class="back-button">返回</button>
      <h3>运动计划建议</h3>
      <div v-if="suggestion" class="suggestion-content">
        <p><strong>运动类型:</strong> {{ suggestion.suggestionType }}</p>
        <p><strong>建议内容:</strong> {{ suggestion.description }}</p>
        <p><strong>生成时间:</strong> {{ suggestion.createdAt }}</p>
      </div>
      <div v-else class="loading-message">
        <p>正在生成运动计划，请稍候...</p>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'ExerciseSuggestions',
  data() {
    return {
      suggestion: null, // 存储生成的运动计划
    };
  },
  created() {
    // 生成运动计划
    this.generateExerciseSuggestions();
  },
  methods: {
    goBack() {
      this.$router.go(-1); // 返回上一页
    },
    // 解析 JWT 令牌获取 userId
    getUserIdFromToken(token) {
      try {
        // 分割 JWT 令牌，获取 Payload 部分
        const payloadBase64 = token.split('.')[1];
        // 将 URL 安全的 Base64 转换为标准 Base64
        const standardBase64 = payloadBase64.replace(/-/g, '+').replace(/_/g, '/');
        // 解码 Base64 字符串
        const payloadJson = atob(standardBase64);
        // 解析 JSON 对象
        const payload = JSON.parse(payloadJson);
        // 返回 userId
        return payload.userId;
      } catch (error) {
        console.error('解析 JWT 令牌出错:', error);
        return null;
      }
    },
    async generateExerciseSuggestions() {
      try {
        // 从 localStorage 获取 JWT 令牌
        const token = localStorage.getItem('jwt');
        if (!token) {
          alert('请先登录');
          this.$router.push('/login'); // 跳转到登录页面
          return;
        }

        // 解析 JWT 令牌获取 userId
        const userId = this.getUserIdFromToken(token);
        if (!userId) {
          alert('无法获取用户 ID，请重新登录');
          this.$router.push('/login');
          return;
        }

        console.log('User ID:', userId); // 调试：打印 userId

        // 发送请求到后端
        const response = await axios.post(
          `http://127.0.0.1:8080/api/login/home/exerciseSuggestions/generate/${userId}`,
          {}, // 请求体为空
          {
            headers: {
              Authorization: `Bearer ${token}`, // 手动添加 token 到请求头
            },
          }
        );
        this.suggestion = response.data; // 存储生成的运动计划
      } catch (error) {
        console.error('生成运动计划出错:', error);
        alert('生成运动计划出错，请稍后重试');
      }
    },
  },
};
</script>

<style scoped>
body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f0f2f5;
}

.exercise-suggestions-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 使容器占满整个视口高度 */
  background-image: url('/background4.jpg'); /* 添加背景图片 */
  background-size: cover; /* 背景图片覆盖整个容器 */
  background-position: center; /* 背景图片居中 */
  background-repeat: no-repeat; /* 背景图片不重复 */
}

.exercise-suggestions-container {
  max-width: 800px; /* 增大容器宽度 */
  width: 90%; /* 使容器宽度自适应 */
  margin: 0 auto;
  padding: 40px; /* 增大内边距 */
  text-align: center;
  background-color: rgba(255, 255, 255, 0.9); /* 白色背景，带透明度 */
  border-radius: 10px; /* 圆角更大 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 阴影 */
  position: relative;
  z-index: 1;
}

.suggestion-content {
  text-align: left;
  padding: 20px; /* 增加内边距 */
  background-color: rgba(255, 255, 255, 0.9); /* 白色背景，带透明度 */
  border: 1px solid #ddd;
  border-radius: 8px; /* 圆角更大 */
  margin-top: 20px; /* 增加间距 */
}

p {
  margin: 12px 0; /* 增加间距 */
  font-size: 16px; /* 增大字体 */
}

strong {
  color: #333;
}

.loading-message {
  font-size: 16px; /* 增大字体 */
  color: #666;
  margin-top: 20px; /* 增加间距 */
}

/* 返回按钮样式 */
.back-button {
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 12px 24px; /* 增大返回按钮的内边距 */
  background-color: #6c757d;
  color: white;
  border: none;
  border-radius: 6px; /* 增大按钮圆角 */
  font-size: 16px; /* 增大按钮字体大小 */
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.back-button:hover {
  background-color: #5a6268;
}
</style>